<template>
	
 	<div class="layui-layout layui-layout-admin" >
 	  <div class="adminnav1">	
        <Pagetop></Pagetop>
      </div>
      <div class="adminnav2">	
       	<Secondnav urlname="shopjf"></Secondnav>
      </div>
      
      <!-- 主体内容 -->
      <div class="layui-body kedou-admin" id="LAY_app_body app">
	    <div class="layadmin-tabsbody-item layui-show">
	    	<div class="pagelist">
	    		 <div class="layui-card-body">
		      		<fieldset class="layui-elem-field layui-field-title">
							  <legend v-if="commodityId">编辑积分商品</legend>
							  <legend v-else>新增积分商品</legend>
							</fieldset>
		      	</div>
		        <div class="layui-card-body">
		        	<div class="layui-form" lay-filter="">
			        	<div class="layui-form-item">
										 <label class="layui-form-label">商品名称</label>
									    <div class="layui-input-block">
									        <input type="text" name="commodityName" placeholder="输入商品名称"   v-model="itemData.name" autocomplete="off" class="layui-input a">
									    </div>	
									</div> 
									<div class="layui-form-item">
										<div class="layui-inline">
										    <label class="layui-form-label">商品图片</label>
										    <div class="layui-input-inline" style="width: 180px;">
											    <div class="layui-upload">
												    <button type="button" class="layui-btn" id="layuiadmin-upload-useradmin">选择文件</button>	
												  </div>
												</div>  
									  </div>
									</div>
							    <div class="layui-form-item">
										<div class="layui-inline">
										    <label class="layui-form-label">图片预览</label>
										    <div class="layui-input-inline" style="width: 180px;">
										        <img id="img" :src="itemData.logo?itemData.logo:require('@/assets/zwyl.jpg')" style="width:100px;height:100px;">
										    </div>										   
									  </div>
									</div>
							    <div class="layui-form-item  layui-form-text">
										<label class="layui-form-label">商品概述</label>
								    <div class="layui-input-block">
								    	<textarea placeholder="请输入内容" class="layui-textarea" v-model="itemData.summary"></textarea>
						    		</div>			
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">所选门店</label>
								    <div class="layui-input-inline">
											<select name="shopId" lay-filter="shopId"  v-model="itemData.shopId">
												<option v-for="item in shoplist" :value="item.id" >{{item.name}}</option>													
											</select>
										</div>		
									</div>
					        <div class="layui-form-item">
										 <label class="layui-form-label">商品分组</label>
									    <div class="layui-input-inline">
												<select name="groupId" lay-filter="groupId"  v-model="itemData.groupId">
													<option v-for="item in grouplist" :value="item.id" >{{item.name}}</option>
												</select>
											</div>		
									</div>
							    <div class="layui-form-item">
								    <label class="layui-form-label">商品分类</label>
								    <div class="layui-input-block" v-if="!commodityId">
								    		<div class="fllist">
								    			<ul v-if="fllist[0].length>0">
								    				<li :class="flcur[0]==item.id?'cur':''" v-for="item in fllist[0]" @click="getfl(item.id,1)">{{item.name}}</li>
								    			</ul>
								    			<ul v-if="fllist[1].length>0">
								    				<li :class="flcur[1]==item.id?'cur':''" v-for="item in fllist[1]" @click="getfl(item.id,2)">{{item.name}}</li>
								    			</ul>
								    			<ul v-if="fllist[2].length>0">
								    				<li :class="flcur[2]==item.id?'cur':''" v-for="item in fllist[2]" @click="getfl(item.id,3)">{{item.name}}</li>
								    			</ul>
								    			<ul v-if="fllist[3].length>0">
								    				<li :class="flcur[3]==item.id?'cur':''" v-for="item in fllist[3]" @click="getfl(item.id,4)">{{item.name}}</li>
								    			</ul>
								    			
								    		</div>
								    </div>	
								     <div class="layui-input-block" v-else>
								     	<input type="text" :value="flname" disabled="" class="layui-input" placeholder="输入商品名称" >
								     </div>
								</div>
									
							    <div class="layui-form-item">
										<label class="layui-form-label">商品状态</label>
								    <div class="layui-input-inline">
											<select name="status" lay-filter="status"  v-model="itemData.status">
												<option value="1">正常销售</option>	
											  <option value="2">下架</option>
											</select>
										</div>		
									</div>									
									<div class="layui-form-item">
										<label class="layui-form-label">规格</label>
								    <div class="layui-input-block">
								       <!-- <input type="text" name="" disabled="disabled"   autocomplete="off" class="layui-input a" >-->
								      <table class="layui-table">
												  <colgroup>
												    <col width="20%">
												    <col width="20%">
												    <col width="20%">
												    <col width="20%">
												    <col width="20%">
												    <col>
												  </colgroup>
												  <thead>
												    <tr>
												    	<th>规格名称</th>
												      <th>库存</th>
												      <th>积分</th>
												      <th>重量</th>
												      <th>额外金额</th>
												    </tr> 
												  </thead>
												  <tbody>
												    <tr v-for="item in gglist">
												    	<td>{{item.name}}</td>
												    	<td><input type="text" name="" v-model="item.amount" value="" class="layui-input a" placeholder="库存"></td>
												      <td><input type="text" name="" v-model="item.saleprice" value="" class="layui-input a" placeholder="积分"></td>
												      <td><input type="text" name="" v-model="item.goodsweight" value="" class="layui-input a" placeholder="重量"></td>
												      <td><input type="text" name="" v-model="item.extraprice" value="" class="layui-input a" placeholder="额外金额"></td>	
												
												    </tr>									   
												  </tbody>
												</table>
											</div>		
											<label class="layui-form-label"></label>
											<button class="layui-btn layui-btn-normal" @click="getgg">添加规格</button>
											<button v-if="gglist.length>1" class="layui-btn layui-btn-danger" @click="delgg">删除规格</button>
									</div>
									  							
									<div class="layui-form-item">
										<label class="layui-form-label">商品详情</label>
									    <div class="layui-input-block">
									      <div class="layui-upload">
												  <button type="button" class="layui-btn" id="test2">多图片上传</button> 
												   <button type="button" class="layui-btn layui-btn-warm" @click="delimg">清除图片</button> 
												  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
												    预览图：
												    <div class="layui-upload-list" style="width: 100%;" id="demo2"></div>
												 </blockquote>
												</div>
									    </div>	
									</div>
									<div class="layui-form-item">
										<div class="layui-input-block">
											<button class="layui-btn layui-btn-normal" lay-submit lay-filter="setmyinfo" @click="confirmOk">确认</button>
										</div>
									</div>
								</div>	
		        </div>		      
	        </div>
	    </div>
	  </div>  
	     
	</div>
</template>
<script>
import Pagetop from '../../common/pagetop.vue'
import Secondnav from '../../common/secondnav.vue'
import Vue from 'vue' 
export default {	
  name: 'jfadd',  
  components: {Pagetop,Secondnav},	  
  data () {
    return {   	
    	itemData:{logo:"",status:1,detailcontent:"",mallCommodityType:1,type:1},
    	shoplist:[],
    	grouplist:[],
    	fllist:[[],[],[],[]],
    	flcur:[],
    	gglist:[{name:"统一规格",amount:'',saleprice:'',goodsweight:'',extraprice:''}],
    	ruslist:[],
    	commodityId:'',
    	shopId:'',
    	flname:""
    }
  },
  mounted(){ 
  	var _this = this;
    layui.use('upload', function(){
		  var upload = layui.upload;
		  var uploadInst = upload.render({
		    elem: '#layuiadmin-upload-useradmin',//绑定元素
		    data:{
		    	type:2
		    }
		    ,url:imguploadurl //上传接口
		    ,done: function(res){
		    	layer.msg('上传成功');
		    	_this.itemData.logo=res.msg;
		    }
		    ,error: function(){
		      layer.msg('上传失败');
		    }
		  });
		  upload.render({
		    elem: '#test2',
		    data:{
		    	type:2
		    }
		    ,url: 'http://storage.g2ma.com/imgUpload/multi'
		    ,multiple: true
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      obj.preview(function(index, file, result){
		        $('#demo2').append('<img width="100" height="100" src="'+ result +'" alt="'+ file.name +'" style="display:inline-block;margin-right:10px;">')
		      });
		    }
		    ,done: function(res){
		      layer.msg('上传成功');
		      var img=_this.itemData.detailcontent;
		      var imgs=img+'<img src="'+res.msg+'" />'
		      _this.itemData.detailcontent=imgs;
		    }
		  });
		  
		});
  	this.getshop();
  	this.getfl(1,0);
  	window.dogg = this.dogg;
  	if(this.$route.query.commodityId){
	  	this.commodityId=this.$route.query.commodityId;
	  	this.shopId=this.$route.query.shopId;
	  	this.getdate();
	}	
  	
  },
  methods: {  
  		getdate:function(){
  			var _this = this; 	
  			var url="/huanxinsong/commodity/editJson"
  			var dates={
		    	shopId:this.shopId,
		    	commodityId:this.commodityId
		    }
			ajaxRequest(url,'GET','json',dates,function(ret,err){
				_this.itemData=ret.content.commodityFullInfo;
				_this.flname=ret.content.category.name
				_this.getylgg();
				_this.getgoodsxq();
			})	
			
			
  		},
  		delimg:function(){
			this.itemData.detailcontent="";
			$('#demo2').html("");
		},
  		getgoodsxq:function(){
  			var _this = this; 	
  			var url1="/commodity/getDetail"
			var dates={
		    	id:this.commodityId
		    }
			ajaxRequest(url1,'GET','json',dates,function(ret,err){
				_this.itemData.detailcontent=ret.content.content
				_this.itemData.detailId=ret.content.id
				$('#demo2').html(ret.content.content)
			})	
  		},
  		
  		getylgg:function(){
  			var _this = this; 	
  			var url="/huanxinsong/commodity/getinventorygoodsparams"
  			var dates={
		    	commodityId:this.commodityId,
		    	shopId:this.shopId
		    	
		    }
			ajaxRequest(url,'GET','json',dates,function(ret,err){
				var arr=ret;
				var goodsId="";
				for(var i=0;i<arr.length;i++){
					var cname=arr[i].specSerial;
					if(cname.indexOf(";")>=0){
						var yname=cname.split(";");
					}
					else{
						if(cname!="统一规格"){
							var yname=[];
							yname[0]=cname;
						}
						else{
							var yname=cname;
						}
					}
					arr[i].yyname=yname;
					goodsId=goodsId+arr[i].id+","
					if(yname.toString().indexOf(":")<0){
						var str=cname;
					}
					else{
						var str="";
						for(var j=0;j<yname.length;j++){
							str=str+yname[j].split(":")[1]+","
							
						}
					}
					arr[i].name=str;
					arr[i].saleprice=arr[i].price;
					arr[i].goodsweight=arr[i].weight;
					
				}
				_this.itemData.goodsId=goodsId.substr(0,goodsId.length-1);
				_this.gglist=arr;
			})	
  		},
		getshop:function(){
			var _this = this; 										      	
		    var url='/commodity/getShopsByDealerId'
		    var dates={
		    	dealerId:localStorage.getItem("id")
		    }
			ajaxRequest(url,'GET','json',dates,function(ret,err){
				_this.shoplist=ret.content;
				if(_this.shopId){
					_this.itemData.shopId=_this.shopId
				}
				else{
					_this.itemData.shopId=ret.content[0].id;
				}
				_this.getfz();
			})				
			
		},		
		getfz:function(){
			var _this=this;
	  		var dates={
	  			dealerId:localStorage.getItem("id"),			
	  			shopId:_this.itemData.shopId
	  		}
				var url="/commodity/getShopGroups";		
	  		ajaxRequest(url,'GET','json',dates,function(ret,err){ 
	  		 	_this.grouplist=ret.content;
	  		 	if(_this.commodityId){
	  		 		//_this.itemData.groupId=
	  		 	}
	  		 	else{
	  		 		_this.itemData.groupId=ret.content[0].id;
	  		 	}
	  		})
		},
  	getfl:function(pid,index){//分类
  		if(pid!=1){
  			this.itemData.categoryId=pid;
  			this.flcur[index-1]=pid;
  		}
  		var _this=this;
  		var data={
  			parentId:pid,			
  		}
  		var url = "/category/getSubCategories";
  		ajaxRequest(url,'GET','json',data,function(ret,err){ 
  			 for(var i=index;i<4;i++){
  			 	var arr=[];
  			 	Vue.set(_this.fllist,i,arr);
  			 }
  		   Vue.set(_this.fllist,index,ret.content)
  		})
  	},
  	getgg:function(){//规格
  		var _this=this;
  		if(this.itemData.categoryId){
	  		var _this = this;
			var id=this.itemData.categoryId;
			layer.open({
	            type: 2
	            ,title: '选择规格值'
	            ,shadeClose: false//点击遮罩关闭
	            ,content:baseurl+'/gglist'
	            ,area:['90%', '80%']          
	            ,success : function(layero, index){
			        var iframeWin = window[layero.find('iframe')[0]['name']];
			        iframeWin.getdates(id);
		        },	      
	        });
	  	}
	  	else{
	  		layer.msg('请先选择分类');
	  	}
  	}, 
  	delgg:function(){
  		this.gglist=[{name:"统一规格",amount:'',saleprice:'',originalprice:'',goodsweight:''}]	
  	},
  	dogg:function(arr){
  		var carr=[];
  		for(var i=0;i<arr.length;i++){
  			var obj={
	  			name:'',
	  			yyname:'',
	  			amount:'',
				saleprice:'',
				originalprice:'',
				goodsweight:'',
				
	  		}
  			obj.yyname=arr[i];
  			var str="";
  			
  			for(var j=0;j<arr[i].length;j++){
  				
  				str=str+arr[i][j].split(":")[1]+":"
  			}
  			obj.name=str;
  			carr.push(obj);
  		}
  		this.gglist=carr;
  	},
	confirmOk:function(){
		var _this = this;   	
		var len = $(".a").length;
		for(var i = 0; i < len; i++) {
			if($(".a").eq(i).val() == ''||$(".a").eq(i).val()<=0) {
				var msg = $(".a").eq(i).attr("placeholder");
				layer.msg('请输入正确的'+msg);
				return;
			}
		}	
		if(!this.itemData.categoryId){
			layer.msg('请选择分类');
			return false;
		}
		/*if(!this.itemData.logo){
			layer.msg('请上传商品图片');
			return false;
		}
		if(!this.itemData.detailcontent){
			layer.msg('请上传商品详情图片');
			return false;
		}*/
		
		var dates=this.itemData;
		if(this.gglist.length==1){
			dates.baseamount=this.gglist[0].amount;
			dates.basesaleprice=this.gglist[0].saleprice;
			dates.weight=this.gglist[0].goodsweight;
			dates.baseextraprice=this.gglist[0].extraprice;
			dates.amount=[];
			dates.saleprice=[];
			dates.specSerial=[];
			dates.goodsweight=[];
			dates.extraprice=[];
		}
		else{
			var arr=this.gglist;
			var specSerial="";
			var amount="";
			var saleprice="";
			var goodsweight="";
			var extraprice="";
			var originalprice=[];
			for(var i=0;i<arr.length;i++){
				specSerial=specSerial+arr[i].yyname.join(";")+',';
				amount=amount+arr[i].amount+',';
				saleprice=saleprice+arr[i].saleprice+',';
				goodsweight=goodsweight+arr[i].goodsweight+',';
				extraprice=extraprice+arr[i].extraprice+',';
				originalprice[i]=0
			}
			specSerial=specSerial.substr(0,specSerial.length - 1);
			amount=amount.substr(0,amount.length - 1);
			saleprice=saleprice.substr(0,saleprice.length - 1);
			goodsweight=goodsweight.substr(0,goodsweight.length - 1);
			extraprice=extraprice.substr(0,extraprice.length - 1);
			dates.specSerial=specSerial;
			dates.amount=amount;
			dates.saleprice=saleprice;
			dates.goodsweight=goodsweight;
			dates.extraprice=extraprice;
			dates.basesaleprice=0;
			dates.originalprice=originalprice;
			dates.weight=0;
		}
		dates.startTime="";
		dates.endTime="";
		dates.logobatch="";
		dates.shopCommodityGroupName="";
		var url = "/huanxinsong/commodity/publishgernalgoods";
	  	ajaxRequest(url,'GET', 'json',dates, function(ret, err){
			layer.msg("操作成功");
			setTimeout(function(){
				_this.$router.push({path:'/jfshoplist'})
	      	},1000)
		})
	}
  },
  updated:function(){
  	var _this = this;
	layui.use('form', function(){
	  var form = layui.form;
	  form.render();
	  form.on("select(groupId)", function(data){										
		   _this.itemData.groupId = data.value
	  });
	  form.on("select(shopId)", function(data){										
		   _this.itemData.shopId = data.value
	  });
	  form.on("select(status)", function(data){										
		   _this.itemData.status = data.value
	  });
	});
		
  },
}
</script>
<style>
	#J_imageView img{width:400px;display:block;}
	.fllist ul{display:inline-block; width: 20%;height:250px;margin-right:1%;overflow:hidden;overflow-y:scroll;border:1px solid #eee;}
	.fllist ul li{height:30px;line-height:30px;padding:5px 20px;border-bottom:1px solid #eee;cursor:pointer;}
	.fllist ul li.cur{ background-color:#3276df;color:#fff;}
	#demo2 img{display:inline-block;margin-right:10px;width:100px;height:100px;}
</style>
